<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model.lazy="xing" />
    <span>+</span>
    <input type="text" v-model.lazy="ming" />
    <span>=</span>
    <input type="text" v-model.lazy="fullName">
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "张",
      ming: "三",
    };
  },
  // 计算属性，要写到 和 data 平级的 computed 中
  computed: {
    // 所有的计算属性，都放到这里 【计算属性，必须返回i算的结果】
    // fullName() {
    //   return this.xing + ' ' + this.ming;
    // },

    // 如果需要修改计算属性的值，需要写成对象格式 (对象中要写 get 和 set 方法)
    fullName: {
      // 当使用计算属性的时候，get就执行了
      get () {
        return this.xing + ' ' + this.ming;
      },
      // 当修改计算属性的时候，set就执行了,形参就是修改后的结果
      set (val) {
        // console.log(val);
        let arr = val.split(' ')
        // console.log(arr);
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  },
};
</script>

<style>
</style>